<template>
  <div class="template-selection-page">
    <el-page-header @back="goBack" content="创建新网站"></el-page-header>

    <div class="header">
      <h2>请选择一个模板</h2>
      <p>请随意选择，模板选择后可随时互换</p>
    </div>

    <el-tabs v-model="activeName" type="card" @tab-click="filterTemplates">
      <el-tab-pane
        v-for="category in categories"
        :key="category.name"
        :label="category.label"
        :name="category.name"
      >
        <div class="template-grid">
          <div
            v-for="item in filteredTemplates"
            :key="item.id"
            @click="showForm(item)"
            class="template-item"
          >
            <el-image :src="item.sitePic.replace('dist/', '')"></el-image>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane disabled>
        <span slot="label">
          <el-dropdown @command="filterByDropdown">
            <span class="el-dropdown-link">
              更多<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                v-for="option in moreOptions"
                :key="option"
                :command="option"
                :class="{ selected: option === currentOption }"
              >
                {{ option }}
              </el-dropdown-item>
              <div class="suggestion">
                <a href="http://www.baidu.com">
                  找不到你想要的分类？请告诉我们你的建议！
                </a>
              </div>
            </el-dropdown-menu>
          </el-dropdown>
        </span>
      </el-tab-pane>
    </el-tabs>

    <el-dialog title="设置" :visible.sync="dialogFormVisible">
      <el-form
        ref="form"
        :model="websiteInfo"
        label-width="100px"
        :rules="rules"
      >
        <el-form-item prop="siteLogo" label="Logo：">
          <el-input
            v-model.trim="websiteInfo.siteLogo"
            style="width: 80%"
          ></el-input>
        </el-form-item>
        <el-form-item prop="siteName" label="网站名：">
          <el-input
            v-model.trim="websiteInfo.siteName"
            style="width: 80%"
          ></el-input>
        </el-form-item>
        <el-form-item prop="sitePic" label="网站图片：">
          <el-input
            v-model.trim="websiteInfo.sitePic"
            style="width: 80%"
          ></el-input>
        </el-form-item>
        <el-form-item prop="siteUrl" label="网站模板：">
          <el-input
            v-model.trim="websiteInfo.siteUrl"
            style="width: 80%"
            :disabled="isSiteUrlDisabled"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelDialog">取消</el-button>
        <el-button type="primary" @click="submitDialog">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addSite } from "@/api/api.js";

export default {
  data() {
    return {
      activeName: "all",
      dialogFormVisible: false,
      websiteList: [
        {
          id: 0,
          sitePic:
            "https://cdn4.codesign.qq.com/prototypes/2024/03/13/1DWk924J7D1Q030GnMm13/biktvbfj0vgyvjlx/ef7d0ccb719e8f2e151ad81a49b23946.svg",
          siteUrl: "",
          siteType: "first",
        },
        {
          id: 1,
          sitePic: "dist/template/艾三维技术/image.png",
          siteUrl: "dist/template/艾三维技术/index.html",
          siteType: "公司/项目",
        },
        {
          id: 3,
          sitePic: "dist/template/shangcheng/image.png",
          siteUrl: "dist/template/shangcheng/index.html",
          siteType: "商店",
        },
        {
          id: 4,
          sitePic: "dist/template/Bentley市政/image.png",
          siteUrl: "dist/template/Bentley市政/index.html",
          siteType: "公司企业",
        },
        {
          id: 7,
          sitePic: "dist/template/Bentley市政/other/image.png",
          siteUrl: "dist/template/Bentley市政/other/index.html",
          siteType: "模板内页",
        },
        {
          id: 5,
          sitePic: "dist/template/maze/image.png",
          siteUrl: "dist/template/maze/index.html",
          siteType: "公司企业",
        },
        {
          id: 6,
          sitePic: "dist/template/maze/other/image.png",
          siteUrl: "dist/template/maze/other/index.html",
          siteType: "模板内页",
        },
        {
          id: 2,
          sitePic: "dist/template/Bentley市政行业/image.png",
          siteUrl: "dist/template/Bentley市政行业/index.html",
          siteType: "公司企业",
        },
      ],
      websiteInfo: { siteLogo: "", siteName: "", sitePic: "", siteUrl: "" },
      rules: {
        siteLogo: [
          { required: true, message: "Logo不能为空", trigger: "blur" },
        ],
        siteName: [
          { required: true, message: "网站名不能为空", trigger: "blur" },
        ],
        sitePic: [
          { required: true, message: "网站图片不能为空", trigger: "blur" },
        ],
        siteUrl: [
          { required: true, message: "网站链接不能为空", trigger: "blur" },
        ],
      },
      categories: [
        { name: "all", label: "全部" },
        { name: "公司/项目", label: "公司/项目" },
        { name: "公司企业", label: "公司企业" },
        { name: "初创公司", label: "初创公司" },
        { name: "工作室", label: "工作室" },
        { name: "个人作品集", label: "个人作品集" },
        { name: "商店", label: "商店" },
      ],
      moreOptions: [
        "博客",
        "情人节",
        "餐饮",
        "模板内页",
        "外贸",
        "酒店服务",
        "社区服务",
        "工业制造",
        "家政服务",
        "社会公益",
        "母婴保健",
        "健康与美容",
        "旅游出行",
        "家居与生活",
        "创意设计",
        "教育培训",
        "活动交流",
        "空白模板",
      ],
      currentOption: "",
      filteredTemplates: [],
      isSiteUrlDisabled: false,
    };
  },
  created() {
    this.filterTemplates({ name: this.activeName });
  },
  methods: {
    // 根据tab筛选模板
    filterTemplates(tab) {
      if (tab.name === "all") {
        this.filteredTemplates = this.websiteList;
      } else {
        this.filteredTemplates = this.websiteList.filter(
          (item) => item.siteType === tab.label
        );
      }
    },
    // 根据下拉框筛选模板
    filterByDropdown(command) {
      // 下拉框选中值后，tab不选中值
      this.activeName = "all";

      // 当前选中的选项，用于修改选中item的样式
      this.currentOption = command;

      // 根据选中的选项筛选模板
      this.filteredTemplates = this.websiteList.filter(
        (item) => item.siteType === command
      );
    },
    // 显示弹出框
    showForm(item) {
      this.websiteInfo = { ...item };
      this.isSiteUrlDisabled = !!item.siteUrl;
      this.dialogFormVisible = true;
    },
    goBack() {
      this.$router.go(-1);
    },
    cancelDialog() {
      this.dialogFormVisible = false;
    },
    async submitDialog() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          try {
            const res = await addSite(this.websiteInfo);
            this.$message({
              message: res.data.result,
              type: res.data.code === 200 ? "success" : "error",
            });
            if (res.data.code === 200) this.goBack();
          } catch (error) {
            console.error(error);
          } finally {
            this.dialogFormVisible = false;
          }
        } else {
          this.$message({ message: "请填写完整", type: "error" });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.template-selection-page {
  text-align: center;
  margin: 20px;
}

.header h2 {
  font-size: 24px;
  margin-bottom: 10px;
}

.header p {
  font-size: 14px;
  color: #888;
  margin: 15px 0;
}

.category-tabs {
  margin-bottom: 20px;
}

:deep(.el-tabs__header) {
  border: none;
  .el-tabs__nav-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
    .el-tabs__nav-scroll {
      border: 1px solid #797979;
      border-radius: 9999px;
    }
  }
  .el-tabs__nav {
    border: none;
  }
  .el-tabs__item {
    border: none;
  }
  .el-tabs__item:hover {
    color: #6e5eff;
  }
  .el-tabs__item.is-active {
    color: #6e5eff;
  }
}

.el-dropdown-link {
  cursor: pointer;
  color: #303133;
}
.el-dropdown-link:hover {
  color: #6e5eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}

.el-dropdown-menu {
  width: 670px;
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  grid-gap: 5px;
  text-align: left;
  .el-dropdown-item {
    font-size: 16px;
    color: #303133;
    &:hover {
      background-color: #f5f5f5;
      color: #6e5eff;
    }
  }
  .el-dropdown-menu__item {
    line-height: 25px;
    .el-menu-item {
      padding: 0;
    }
  }
  .suggestion {
    display: block;
    text-align: left;
    margin: 10px 20px;
    font-size: 14px;
    grid-column: 1 / -1;
    a {
      text-decoration: none;
      color: #6e5eff;
    }
  }
}

.selected {
  color: #6e5eff;
}

.template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
  justify-items: center;
  justify-content: space-around;
  gap: 20px 30px;
}

.template-item {
  width: 300px;
  height: 170px;
  border: 1px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
</style>
